Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  
  attached() {
    // 延迟执行确保渲染完成
    wx.nextTick(() => {
      this.drawWatermark()
    })
  },
  
  methods: {
    drawWatermark() {
      wx.createSelectorQuery()
        .in(this)
        .select('#watermarkCanvas')
        .fields({ node: true, size: true })
        .exec(res => {
          if (!res[0] || !res[0].node) {
            console.error('无法获取canvas节点')
            return
          }
          
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          const dpr = wx.getSystemInfoSync().pixelRatio
          const width = res[0].width * dpr
          const height = res[0].height * dpr
          const userInfo = wx.getStorageSync('userInfo');
          const idcard = userInfo.idcard
          canvas.width = width
          canvas.height = height
          ctx.scale(dpr, dpr)
          
          // 绘制半透明水印
          ctx.globalAlpha = 0.1
          ctx.font = '14px sans-serif'
          ctx.rotate(-25 * Math.PI / 180)
          
          for (let i = -5; i < 15; i++) {
            for (let j = -5; j < 15; j++) {
              ctx.fillText(`用户ID: ${idcard}`,  
                           i * 220, j * 80)
            }
          }
        })
    }
  }
})
